<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        main{
            padding: 60px 0;
            background-color: pink;
            background-image: url(./imgs/banner5.png);
            background-position: center center;
            background-size: cover;
        }
        main button{
            color: white;
            background-color: #1c6dc0;
            padding: 5px 15px;
            border: none;
            cursor: pointer;
        }
        main button:hover{
            background-color: #398cdf;
        }
    </style>
</head>
<body>
    <header class="tc">我的小滴</header>
    <main class="tc">
        <img class="mb10" src="./imgs/head.png" alt="">
        <p class="mb10">华杉科技</p>
        <button onclick="onExit()">退出登录</button>
    </main>
    <style>
        nav{
            padding: 10px;
        }
        nav a{
            display: flex;
            background-color: #ffffff;
            border: 1px solid #c1c1c1;
            padding: 15px 10px;
            text-decoration: none;
            font-size: 14px;
            color: #333333;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        nav a p{
            margin-right: auto;
            margin-left: 30px;
        }
    </style>
    <nav>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_2.png" alt="">
            <p>我的钱包</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
        <a href="#">
            <img src="./imgs/gr_1.png" alt="">
            <p>我的客户</p>
            <img src="./imgs/arrow-icon.png" alt="">
        </a>
    </nav>
    <footer>
        <a href="./index.html">
            <img src="./imgs/nav10.png" alt="">
            <p>小滴服务</p>
        </a>
        <a href="#">
            <img src="./imgs/nav20.png" alt="">
            <p>创业服务</p>
        </a>
        <a href="./server.html">
            <img src="./imgs/nav30.png" alt="">
            <p>服务流程</p>
        </a>
        <a href="./pingtai.html">
            <img src="./imgs/nav40.png" alt="">
            <p>平台风采</p>
        </a>
        <a href="#" class="active">
            <img src="./imgs/nav51.png" alt="">
            <p>我的小滴</p>
        </a>
    </footer>
    <script>
        function onExit(){
            location.href="./login.html";
        }
    </script>
</body>
</html>